لخدمات تصميم وبرمجة المواقع 
programmer4ever@yahoo.com‏ 


010 T TAV £ 


:الدرس::::: 


بسم الله الرحمن الرحيم 


اخواني الاعزاء سوف نقوم بتصميم موقع كامل من الالف الى الياء وبطريقة احترافية وتفصيلية 
جدا وقد تطول السلسلة لعدة حلقات وذلك لرغبتنا في ادراج كل كبيرة وصغيرة في تصميم 
المواقع حتى تكون ان شاء الله موسوعه كاملة لتعليم تصميم المواقع يعتمد عليها كل من يرغب 
التصميم دووون التنقل من منتدى الى اخر للحصول على معلومات تساعده على بناء موقع 
متکامل 


وذلك يجب اتباع الاتي 


-المكونات الاساسية : 


-1برنامج الفوتوشوب-2 مساحه على شبكة الانترنت لرفع الموقع ۳- برنامج الفرنت بيج -٤‏ حجز 
برنامج الشات 5 برنامج الاف تي بي 
-سلسلة الدروس التي سوف نتطرق لها 


الحلقة الاول :حجز مساحه على شبكة الانترنت بشرح مفصل وحجز شااااات 
الحلقة الثانية: تصميم واجهة موقع احترافية من الالف الى الياء (الجزء الاول( 
الحلقلة الثالثة:رفع واجهة الموقع الاحترافية عن طريق الاف تي بي (الجزء الثاني( 
الحلقة الرابعة :تصميم صفحات فرعية للموقع بطريقة احترافية( الجزء الاول( 
الحلقة الخامسة :رفع الصفحات الفرعية عن طريق الاف تي بي(الجزء الثاني( 
الحلقة السادسة :تركيب منتدى على الموقع مع انشاء قاعدة له ( الجزء الاول( 
الحلقة السابعة:تركيب منتدى على الموقع مع انشاء قاعدة له ( الجزء الثاني( 
الحلقة الثامنه:تركيب الشات والصور الرمزية والابتسامات 


الحلقة التاسعة:اضافة مكتبة الصور للموقع 
الحلقة العاشرة: اضافة مكتبة البرامج للموقع 
الحلقة الحادية عشر: اضافة شريط الاهداء للواجهة الرئيسية 
الحلقة الثانية عشر:اضافة ستايل للمنتدى 
الحلقة الثالثة عشر: اضافة بعض الهاكات المهمة للمنتدى 


ملاحظة مهمة جدا : قد يتم تعديل على احد الدروس وذلك لزيادة معلومة او لتعديل خطاء لا قدر 
الله وسوف ينبه عن ذلك بالدرس الذي يليه ووضعه كملاحظة في بداية الدرس الجديد 


ارجوووا من الاخوان المتابعة وتطبيق الارون جني اكد لي انك مي خصو ة بجو واي 
ملاحظة او سوال لا تتردد فيه طرحه 


والان اخواني الاعزاء سوف نبداء في سلسلة الدروس وكان الله في عوننا جميعاً 
الحلقة الاول 
حجز مساحه على شبكة الانترنت بشرح مفصل وحجز شااااات 


اخواني هناك شركات كثيرة تقدم خدمة الاتسضافة ولكن تختلف عن بعضها من حيث الاسعار 
والحماية والدعم الفني المتواصل والخدمات الاخرى 


فقد تجد شركة تعطيك عرض ۰ میغا ب ۰۰ ريال ولکنه لا توجد فيها حماية قوية ولا يمكن 
تقديم الدعم الفني على مدار ۲٤‏ ساعه ولا يوجد نسخ احتياطي 

وتجد شركة ثانية تعطيك عرض ۰۰ میغا ب ٠‏ ريال ولكن يوجد عليها حماية قوية ودعم 

٤‏ ساعه وخدمات اخری ونسخ احتياطي 

واهم خدمة تقدمه الشركة المستضيفه هو النسخ الاحتياطي فالافضل ان تختار شركة تقوم بنسخ 

يومي» اسبوعي» شهري حتی لو لا قدر الله اخترق الموقع او هبط السيرفر يكون هناك نسخه من 
قواعد موقعك عندهم تستطيع اعادته ولا يذهب جهدك سداء 

فقد حدث الامر لاحد اصدقائي حيث حجز مسحه في شركة رخيصة وبعد اربعة اشهر كان موقعه 

قد اشتهر ولديه اعضاء تجاوزا الالفين والمنتدى يحتوي على مواضيع كثير والشات لديه زوار 

كثر وبدون سابق انذار اخترق سيرفر الشركة وذهبت جميع جهود صديقي سداء حيث ان الشركة 

لم تكن تعمل نسخ احتياطي للموقع وذهب الالفين عضو ومعهم المنتدى والشات. 


فاذا كنت ترغب بالرخص عليك بالاول واذا كنت تبحث عن الجودة والافضل عليك بالثانية 
واذا كان موقعك بسيط وليس كبير ويختصر على منتدى وشات فالافضل ان تبداء بمساحه قدرها 
۰ ميغا وتستطيع ان تزيدها بأي وقت . 


انا لن اتطرق لاي شركة حتى لا يكون هناك تحيز ولكن انت يمكن ايجاد الشركة بنفسك وتستطيع 


معرفة اذا كانت شركة قوية او لا من حيث مشاهدة عملائها فاذا كانوا من المواقع الكبيرة فعرف 
انها شركة استضافة ممتازة وكذالك عن طريق الاسعار فلا تغرك رخس الشركة فقد تاتي على 
راسك بعد فترة 


فطريقة الحجز سهلة اختر اي شركة وسوف تجد في موقعهم حساب الشركة ارسل المبلغ لهم 
حسب المساحه التي اخترتها وكذالك سعر الشات 


لنفرض انك اخترت مساحة ٠٠١‏ ميغا بسعر ٠٠١‏ ريال 
وشات لمدة ٦‏ شهور بمبلغ وقدره ۰۰ ريال 


المجموع : ٠٠١‏ ريال 
ارسل المبلغ على حسابهم اما عن طريق الايداع او عن طريق الصراف او عن اي طريقه هم 
يحددونها في الموقع 
بعد ان ترسل المبلغ على حسابهم اتصل على رقم الجوال او رقم الخدمه للموقع وتجده في 


الموقع وتخبرهم انك ارسلت المبلغ للمساحه ۰ میغا وشات ٦‏ شهور 
سوف يطلب منك صاحب الاستضافة الاميل حتى يرسل ملعومات الموقع لك وكذلك دومين الموقع 


ملاحظة: قد تختلف طرق ارسال المبلغ او طرق الاتصال بهم فهذا لا يهم لانك سوف تجد الطريقة 
في موقع الاستضافة اهم شي وصول معلومات الموقع الى بريدك 


ولا تنسى ان صاحب الموقع سوف يطلب منك الدومين وهو رابط الموقع الذي يقع بين سسس 
neft ڍl .coms‏ 


“e‏ سا لتا س 


الدومين 


فختر الدومين الذي يناسبك و هناك مواقع تساعدك في معرفة اذا کان الدومین موجود او لا 


على الراااابط 
http://alarbia.com/index.php?display=Domain‏ 


هذا هي صفحة البحث عن الدمين 


ابا عن توان 


ااخل اسر في الفرا م الوجود في لأسقل لي بخ البحت عنه , كنك البحث ينطاق أو بجايع الطانات بوامطة رضم | إزالة علادة 
جاتب الشطان , 
ادا اضغط على بحٹ 


: 
- — إعدوضع الدومين 
ا ضع الدومین هنا أ أبحث 


اهم امتدادین ضع عایشم صح 
orguk, LÛ eovuk, WÎ biz. LÎ info, LÎ 2 EE Î‏ 


وف تظهر النتيجه وبعدها تتاكد اذا كان الدومين محجوز او لا 
متوفر ) فهو غير محجوز ويمكنك حجزه 
توفر) فهو محجوز ولا یمکن حجزه 


مشر البخت عن النطاقات 
ند تة | : لبتحث 


الخاصبة بموقحنا هذا ء لا شرف بان نحطيك المحلومات في 


ا مججوز بامتداد ٥-017‏ 


علو مات عن صاحبه 


غار مججوز بامتداد ع٩‏ 


اخبرت صاحب الشركة المستضيفة تنتظر وصول 
) العادة لا يتجاوز الامر٤‏ ۲ ساعه ( 


ومات الموقع ورسالة ثانية فيها معلومات الشات 


Today | Mail Calendar | Contacts 


Fran : ME, AhlezZ =alwasn_com@hatmail,camz 

Sent : Tuesday, January 10, ZOU 5:43 PM 

Ta: i ahotnail. cam 

E; alwasn_com@hotmail, com 

ببانات حسابك ١‏ صن شبكة الجربية لخذمات الاستضافة والتصصية : Subject‏ 


هن البيانات خاصة بموقعك اللدخول على لوحة تحكم لوقع والاف تي بي لرفع لافقا يانات حسابك لديا 


| Hew Account Info | 
4=====s=s=sss=ss=ssSssSSS SSS SS55 5555 = إ‎ 

| Domain: des-ksa, coqa زانط الوح‎ 

اللاي بي الخاضص الوق N IA‏ | 

اسم المستجدح الخاص بالموقح واللاف تي بي _ لهه |0۳0 ll‏ 
الرقم السري الخاص بالوقح واالاف تي بي ل[ Pa55 o d: RR‏ | 
LpanelModl: x‏ | 

| HomeRoot: fhaome 

| Quota: 1DOO MEG 

اسم السار قر الا5 ل HaneSerer 1: Î‏ | 

اسم السدر قر اتشات - NameServer 2: I‏ | 
NarmeServerz:‏ | 

| HameServert: 

| contact Email: SB Thotmal.corn d4 __ ميلك الخاصض‎ 


ولقد تم حجز دومين 
des-ksa.net‏ 


وبنفس الطريقة والمظهرسوف تصلك رسالة معلومات الشات 


وان شاء الله سوف نتطرق الى طريقة الاستفادة من هذه البيانات في الحلقات القادمة 


اتمنیى ان يكون الشرح واضح وان تستفيدوا منه 


بسم الله الرحمن الرحيم 
)اللهم لاعلم لنا الأ ماعلمتنا ( 


کما وعدناکم اخواني بان نكمل السلسلة الى الاخير لتعم الفائدة ويتخرج منها دفعه من الشباب 
الراغبين بالتصميم › وذلك لا يتم الا بالمتابعة خطوة خطوة وتطبيق الدروس 


اولا باول . 


كما لا يغيب عنكم بان الدروس مكملة لبعضها › حيث انه تم طرح الحلقة الاول لسلسلة تصميم 
موقع كامل وبطريقة احترافية 


وقبل البداء في الحلقة الثانية من سلسلة تعليم التصميم موقع كامل وبطريقة احترافية › لابد من 
مشاهدة الحلقة الاول لانها مكملة لبعضها 


لنبداء الدرس وكان الله في عوننا جميعاً 


الحلقة الثانية 
سلسلة تعليم تصميم موقع كامل ( واجهة موقع احترافية ) الجزء الاول 


نقوم بعرض الواجهه النهائية التي سنصممها 


!Error 


نبداء بالجزء الأول وهو تصميم .. الخلفيه مع البنر .. وهو الجزء الاصعب بالموقع والأهم .. 
لذالك خصصنا له الجزء الاول كاملا .. وبعده نكمل 


الموقع بالجزء الثاني كاملا .. 


افتح برنامج الفوتوشوب بالضغط مرتين على ايقونة البرنامج ( دبل كليك ( 


@ 


e 
i 


نختار من ملف جدید . 


rrr CLD 


Layer Select Filter 
: Ltrl+R 
pen... Ltrl+a 
BrOWSE,., SHFE+LZErlHD 
pen A5... Alt+Ztrl+@ 
pen Recent 


lose Er 

Saye Ztrl+5 

Save A5... ShFE+ZErl+S 

Save For Web,,, Al+SRFEHEZErl+S 
EwEerE 


Place... 


Import 
Export 


Workgroup 
AııtomaklEe 
File Info... 


Page Sef FE+ZErl+P 
Print witty a a lp 
Print... BG E tirre 
Print Gine Lor Alt +SHFE+ZErl+P 


des=ksarconr 
Jump Toa 


Exit ctrl+q 


نضبط المقاسات كما تلاحظ ۷۷١‏ 800 - بكسيل 


x 


Name: (lIntitled-1 2K | 
— |mage Size: 1.76 — س‎ 


Wade: | RIB Lolar اا‎ 


L_OntENnÎS = 


1 1 
2 
i 2 3 
(@) white E ١ 
0 Background Loalar ۳ 
(O Transparent 


dJes-ksa.com 


نختار لونين متناسقين واحد ثقيل والاخر خفيف ... ونقوم بتلوين الخلفيه باللون الخفيف كما 
تلاحظ 


الان نرسم بالدائره ( اذا لم تكن واضحه الدائره عندك اضغط الزر الايمن على المربع وخترها من 
القائمه ) نرسم ۳ دوائر ویكون شكلها كما تلاحظ بالصوره 


اثنتین بشکل طولي والاخری کبیره بالنص 


الان نحول الدوائر جميعا لنتمكن من التعامل معها بشكل افضل ... تابع الصوره لتحويل الدوائر 
الى اشكال عاديه 


E elect Filler Yim Windom Help 
eee | 


Guplicate Layer,,, 
Delete ۴ 


Layer PropertkiEs,,, 


Layer Style ۴| 

ew Fill Layer ۴ hos 
New Adjustment Layer ۴ 

Change Layer Content ۴ ۲ ت‎ 


Layer Lontent Options... 


,| و‎ 
.ASLErlZE Type 
Shape 
New Layer Based Slicë Fil eater 
Add Layer Mask ۴ Wector Mask. 


Enable Layer Mask 


Delete Yector Mask 
Disable Yector Mask 


Aroup with Previoys Ztrl+a 


LUngroup ShFEH+TZErl+HS 


Arrange ۴ 
Alian Linked ۴ 
Distribute Linked ۴ 


f. 


Lock #ãll Layers In Set, 


Merge Dorn LErl+E 
Merge Yisible ShFE+ZErl+E 


Flatten Irnage des-ksa. om 


Matting a EEE 


UBIS2(] 


١‏ ا ا 


الان نقوم بتعبئة الدوائر بالباترين .. والباترين هو خطوط او نقط او اشكال لتجميل الحشو 
بالمربعات والدوائر .. تابع الصوره لتتعرف كيف يتم الوصل للباترين 


والتعبئه 


. 


لتعبئة أي شكل بدل اللون بالباترن مثل الخطوط 
او التنقبط مثاذ نختار اداد التعبنه كما بالرقم 2 


نحدد الخبارمن فون بدل التعبنه . نختار باترين كما 
بالرقم 3 1 
نضغط على السهم الصغير لتفتح نافدد اختبار نوغ الباترن 
كما بالرقم 4 

الان نختارالباترن الذي ذريد كما بالرقم 5 


نقوم بتعبئة الدوائر واحد واحد نحدد الدائره بالضغط عليها ثم نعبئها بالباترن المختار ... والان 
نريد اعطاء الدوائر شكل افضل .. نختار الاداة الموضحه 


بالصوره ونذهب للخيار الاخير . 


lending Options... 


Grop Shadow... 
Inner Shadow... 
Gukter Glow,,, 


21320| 


Inner Slow, ,, 

Bevel and Embos5s,,, 
Sabin... 

olor Oyerlay,.. 
Sradient OverlaY,.. 
Pattern GyerlaY,,, 


Stroke,., 


MESE KSA COM 


نعمل كما تلاحظ بالصوره وهذا لأعطاء الدائره تحديد على اطرافها 


!Error 


Layer Style 


Styles Stroke 
— Siruclure 


Blending Optians: Default Size: ڪڪ‎ 1 
ا‎ Position 


[nner Shadow Blend Mode: 
[_Buter lom pacity: mmm 2 a 


[_Jnnar low 


[_ Esel and Embnszs Fill Type: 


L_FEontaur Lolar: ES 
[_Fexture 

L_Eatin 

[Kalar iwerlay 

[radiant werlay 


Stroke 


الان نرسم دائرتين بالاعلى كما تلاحظ 


Glending Gptions,., 


Grop Shadow... 
Inner Shadow, ,, 
Gukter Glow,,, 


Inner tala, ,, 

Bevel and Emboss,,, 
Sabin... 

Lalor Orerlay. 
Gradient Overlay... 
Pattern Overlay... 


Stroke... 


نبداء بضبط الاعدادات كما تلاحظ بالصور التاليه 


!Error 


Layer Style 


| Styles 
ا‎ Structure 


Blending Gptians: Default Siza: ڪڪ‎ i 1 Canre| 
| lwprop E Position: Dutside ا‎ NEW StYIE 
[¥Înner Shadow 


Elend Made: | Horrnal یه‎ 
[ > 
[_uter alow parity ۸ ay OD FF lI Preview 
lw jnnar law 


[¥ Bevel and Ernboass J pS: | olor ا‎ 


L_FEontaur olor: ll 
[_Pexture 


| L_Eatin 
[Kalar iwerlay 
[radiant werlay 
| Fattern Overlay 
Stroke 


troke 


@ 9 : 
ا 


de $-ksa.com 


!Error 


Layer Style 


Styles Beyvel and Emboss 


Style: [inner Bevel ا‎ 


Blending Options: Default 


[¥ Prop Shadow 
[#Înner Shadow Depth: کے‎ EH 

[_uter alow Direction: (@ Up O Bown 
ق :د‎ E 
Soften: i a 


Technique: | Smooth 2 ا‎ 


a ono 
Shading 


Texture es 
شا‎ Angle: 120 


L_Eatin 
[_ Kolor Gverlay Altitude: 30 | 
[radiant werlay e 


[CF attern Omer lass Lontour : 


[¥ trolke Highlight Mode 


pacity: 


Shadow Mode Multiply  #Î 1 ت‎ u 
pacity: [ 1 ايا ا‎ 0 
۱ ا ڪڪ‎ 
: =; 


des-ksa.com 


!Error 


Inner Glow 


Blend Mode: | Screen اا‎ 
pacity: © E i 
Noise:  “—kmemevÙw—سسا‎ 7 Hi 


OL OL e 


Elements | | 


TechniqUe: | Softer 2 


PFE iB! 


SoUFCZE: 0 enter 0 Edge 


hoke: -___  ں‎ 1 
Size: aaa | E 


Guality 
Loantour ed 


FEange 


Jitter: | 8 


dJes-ksa.com 


!Error 


Layer Style 


| 
[Bevan ortore Dera | 
[ [¥ Prop Shadow 

[Inner Shadow 


L_FEontaur 
[_Fexture 
L_Eatin 
L_Folor iwerlay 
[_Jaradient werlay 
L_Fattern Gverlay 
ll Stroke 


Layer Style 


Î EE Inner Shadow - 


Blending Gptians: Default a Na Canre| 


l# Drop Shadow | pacity: 1 | 

| E" Er 
Inner Shadow 1 
aT Angle: 120 2 lاl5e‎ talobal Light Pre jaa 


lw jnnar alow Distance: ع س م‎ p* 
[¥ Eewel and Ernboass hoke: ا‎ 
L_FEontaur 


Size: 
[_Fexture 
Eatin uality 
[Folor iwerlay Lontour : 
[radiant werlay 
L_Fattern verlay 
ls Stroke 


Noise: 


© 
™ 


= 
| des-ksa.com 


وهذا التعديل الاخير ولاكن انتبه عند الانتهاء من ضبط الاعدادات نضغط على الزر المحدد باللون 
الأحمر . نيو ستايل . لنحفظ التعديلات ونطبقها بكل سهوله على 


اي شكل اخر ... بعد الحفظ اضغط اوكي . 


!Error 


Layer Style 


Drop Shadow 
Structure 


Blend Mode: | Multiply 2 En 


pacity: a | i 


EDR 
. ا‎ . — . 
| [_Puter Glow Angle: 0 20 [lse Global Light أ‎ ENTE 


lw jnnar law Distance: و م‎ p* [ - 
[¥ Bevel and Emboszs Spread: ۹ pg i ا‎ 
L_FEontaur Size: ۽ س ا‎ px 
[_Fexture 


Eatin Guality 


[Folor iwerlay Lontour : ت‎ [| lûnti-aliased 


[_Jaradient Overlay Noize: 1 i 
L_Pattern werlay 


| [Stroke 


Layer Enacks yt Drop Shadow 


u 
ات‎ 


des-ksa.com 


u3 152] 


الان نطبق الاعدادات على الدائره الثانيه نفس الاولى .. وهذا بالذهاب الى قائمة الستايلات او 
الانماط .. وختيار اخر نمط . وهو الذي قمنا بحفظة قبل قليل 


.ومن لم تظهر له هذه الانماط يذهب الى .. قائمة وندوز او نوافذ .. ثم یختار ستایل او نمط 
....... بعد تعديل الدوائر . نرسم مستطيل فوقها 


ونعطيه الاعدادات نفس مافعلنا بالدوائر .. ونقوم بتعبئتة بالباترن كما تعلمنا قبل قليل ... ينتج 
هذا الشكل 


ا 
FE‏ 


u‏ ا 


٤ ج‎ csa.com 


الان نريد ان نرسم اشكال على الاطراف للبنر ... نختار الشكل من قائمة الادوات ونحدد الشكل 
الذي نريد كما تلاحظ بالصوره وهو محدد باللون الاحمر 


ومن لم تظهر هذه الاشكال عنده يضغط على الزر الصغير بأقصى اليمين .. وهو محدد باللون 
الازرق بالصوره التاليه .. تظهر قائمه . اختر كلمة ااج 


او الكل 


!Error 
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HI zax 
ا‎ 


نرسم بالشكل المحدد اثنين ونوزعها على اليمين واليسار بشكل منسق ونعطيها اعدادات مثل 
الدوائر السابقه من قائمة ستايل التي حفظنا الاعدادات بها كما تلاحظ 


بالصوره 


نرسم ورقه يمين وننسخها او نرسم اخرى يسار ونعطيها ستايل نفس ستايل الاشكال الاخر .. 
وتلاحظ تكرار الاعدادات او الستايل على الكل وهذا لتنسيق الموقع 


بشكل احترافي .. الان نريد ان نضبط الشكلين بحيث يظهر الثاني عكس الاول وهذا لتنسيق 
الشكل بين اليمين واليسار للموقع .. نقوم اولا بتحديد الشكل 


المطلوب تابع الصور التاليه 


0 Edit Layer Select Filter Yiew Window Help 


2e Transform LErl+Z س‎ 
ding Boz: EN | 
Step Forward Shft+ZErl+E 1 4 اک ت ت ل‎ 


step Backward Alt+ZErlH+E 


Fade... Shft+Ztrl+F 0 SOO 5O OO 5U OO 5 


Lk Er 
LopY Er 
Lopy Merged ShHFEHZErIHE 
Paste LErlHY 
Paste Into ShFEH+LErlH+Y 
lear 


heck Spelling... 
Find and Replace Text,,, 


Fill... 
stroke... 


Free Transforri Ltrl+T 


Define Brush... 
Define Pattern... 
Define Custom Shape, 


Purge 


Lalor Settings... ShHFEHCErl+K 
Preset Manager... 
Preferences 


ثم نعكسها باأتباع الصوره التاليه 


Chirl#Z 
Step Forward Sht+Ctr+E 


Step Backward Alt+Ctn+Z 
: ZF copy, RGB) 


I ASR EREN ERNRENRZRZEN‏ یی 
uk CLH‏ 

LopY¥ Cirle 

opy Merged Shifter 

Paste CirlteY 

Paste Îrto ShFEHCEHHEY 

lear 


heck Spelling... 
Find and Replatê Text... 


Stroke... 


Trans ari Again Shft+trl+T 


2 Bsn Srzals 

Define Pattern... Rotate 

Gefine Custorn Shape... Ske 
Distort 
Perspectiye 

Color Settings... Sht+Ctrltk 

Frêšêt Mafêağêr.., 

Preferences 


Ratakte 1® 
Rotate 30 CY 
Rotate 0F COW 


نرسم دائره متناسقه بالنص ونعطيها نفس ستايل الاشكال الاخرى . 


All+Ztrl+2 


LErlH+ 

Ltrl+5 
ShfE+Ztrl+S 
AlE+SHFEHZErIHS 


ShfE+ZErl+P 
Print with e rlH+P 
Prink,,, 1 


n 


ت 


rtrl+ 


pen Recenk 


lose 
SAYE 
Save A3... 


Save For Web, 


Revert 
Place... 


Import 
Export 


Workgroup 
AııtomakE 
File Info... 


Page Setup... 


Print ne LOPpY f5 


نختار الصوره ونت نضغط فتح 


!Error 


Look in: O My Documents په‎ 3 3 EF CA. 


MY eBooks MY Musi 
My Recent 
Documents 


3 ٠ Tj My Pictures My Videos 
j | My web sites ۹ الملفات المتلقاة‎ 


ë 


My Docurnenks 


My Computer 


deês-ksa.com‏ ب 


My Network. 
Places 
Fil name: 30 ]25[ اا‎ 
Files of type: All Formals یه‎ 


الان نجعل الصوره فوق الدائره .. وندمجها .. باتباع الصوره التاليه . 


elect Filter Yi Windc 


۴٣ 
Guplicate Layer... 
Delete ۴٣ 


Layer ProperkiBs,,, 
Layer Style ۴ 


Haw Fill Layer 
New Adjustment Layer ٣ 


Hew Layer Based Slice 


Add Layer Mask. ۴٣ 


Add Yector Mask ۴ 


Broup with Pr 


Arrange ۴ 


Merge Dow 
Merge visiblElESJlERAEEA 
Flatten Image 


Matting ۴ 


بعد الدمج نريد تعديل الوان الصوره لتتناسق مع الموقع .. تابع الصوره لتعديل الألوان 


Mode: ٣ 

Adjustments Lewels, a. CIH 

Duplicate... | Pato Levels hft trHL 
ato Zontrast  Al4ShFEY CEH 

fata Calor shft+Ctrl+B‏ وا 
LUFYESa.. trl+M‏ 

Imagf SİZÊı ıı Lalor Balance, trl+B 

LANNY aS SİzZE.., Brightness Zontrast. .. 


Rotate Lanyas 


HuefSsakturation... 
GDesatur ate ahfFEHTEHU 


TFIM, ,, 

i Replace Lalar... 
9 Selectiwe Calar... 

Histogram... Lhannel Mixer... 


Hradienıt Map... 


Inwert ت‎ +1 
Ê 
Equalize i 
ا و‎ Lk 
Threshold... E ا‎ 
Pasterize... ° Û 


ies-ksa.com 
wariatidûns... 


تظهر نافذه التعديل .. اول شي نأشر بعلامة صح على المربعات الموضحه تحت .. ثم نسحب 
الموشر ليعطينا اللون المطلوب للصوره 


HuefSaturation 


Hue: 


saturation: 


L_DlOor izE 
Pre jap 


وذ تس الان اق شاقات جداة ر خففة ‏ وان كما فى رضخ بالضور :الت 


SED 
MN A F 


lı] Rectangle Tool 
la) Rounded Rectangle Tool 1 


a Ellipse Tool ا1‎ 
(Î y Polygon Tool 


Maz CQ f 
ري‎ ¢ 


ج 
Px‏ 


1 


نرسم الخط من فوق لتحت كما هو محدد باللون الاحمر بالصوره التاليه .. ونعطيه الفلتر 


0 


الموضح ... تابع 


IT | wie Window Help 


Last Filter Ltrl+F 


Extract,.., All+ZErlH# 
Liquif¥... ShFE+ZErl+# 
Pattern Maker,,, Alt+ShfEHZErlH# 


Artistic ۴ 

Blur ۴ 

Brush Strokes ۴ ilir LAr RE, 
Gistort ۴ Giffuse Slo, 
HoisE ۴ Displace,,, 

Pixelate ۴ HEEE 

Render ۴ dcean Ripple... 
Sharpen ۴ Pinch... 

Sketch ۴ Polar Coordinates... 
SEylize ۴ Ripplê,., 

TEXEUrE ۴ 

Widen ۴ Spherize,,., 

ther ۴ Twirl... 


E-I 


Digimarc ZiqZa9... 


تظهر نافذه تحذیریه .. اضغط اوکي 


Adobe Photoshop ME 


This shape layer must be raster ized before 
proceeding. will no longer have ã Yector mask. 
Raster ize {he shape? 


هذا الفلتر يسمح لك بالتعديل على الخط كما تشاء .. اعمل منحنيات بالخط بالضغط والسحب 
للجهه التي ترید ... اذا اردت ان تعيده لشكله الاول لتعدل عليه 


مره اخرى اضغط على الزر المحدد باللون الاحمر للتعديل .. بعد ضبط الخط اضغط اوكي 


3 


LIndefined ûreaz: 
(a) Wrap Around 
O Repeat Edge Pixels 


Q90 
آل ا‎ 


des-ksa.&oîh 


الان نكرر الخط ونعمل الشكل المطلوب مع الدائره الصغيره التي رسمناها .. ونكرر هذا الشكل 
لتوزيعه على البنر كما تريد .. 


ينتج عندنا هذا البنر بشكل احترافي مع الخلفيه ........ 


!Error 


ويبقي الجزء الثاني وهو اضافة البنر السفلي .. الفوتر .. والقوائم والعشر مواضيع او الاهداءات 
ومربع الشات ... وننهي درسنا.. 


اتمنى التطبيق لتعم الفائده ... 


مع خالص تمنياتي للجميع بالتوفيق 


بسم الله الرحمن الرحيم 


)اللهم لاعلم لنا الأ ماعلمتنا ( 


بعد ان اجتزنا الجزء الاول من تصميم الواجهه الاحترافيه .. وكان الدرس عن تصميم البنر 
والخلفيه ... نبداء الان بالجزء الثاني وهو الاخير لتصميم الواجهه ولكن ليس الدرس الاخير 
بالسلىلەه 


فبقي علينا بعد تصميم الواجهه تقطيعها وطريقة رفعها على الانترنت وادراج الروابط والجماليات 
مثل الاهداءات واخر ٠١‏ مواضيع وخلافه وايضا طريقة تركيب الشات وضبط اعداداته .. 


فالطریق مازال طویلاً ومن یرید ان يتعلم کل شي ماعلیه الا ان يتابع وان شاء الله ن تتو ضیح عل 
الامور للجميع 


2 


درس اليوم هو انهاء الواجهه الرئيسية وسيكون الدرس على الفوتر ثم مربع العشر مواضيع 
ومربع الاعلانات والشات والقوائم 


على بركة الله نبداء .... 


نفتح عملنا السابق ونرسم مربع اسفل الواجهه وهو الفوتر على شكل مستطيل منحنى الاطراف 


@ 


HADÊ 
LILES 


ندرج صوره ونجعلها فوق الفوتر ونضغط الاختصار CGTRÛL+G‏ من لوحة المفاتيح ليتم دمج 
الصوره مع الفوتر وهي حركه تجميليه للفوتر وتستطيع ان تستغني عنها 


[f Adobe Photoshop ME 


l= Edit Image Layer Select Filter 


LErl+ 
pen... Ltrl+a 
BrowsE,,, ShHfEHZErHO 
pen A5... AltrZtrl+d 
ipen Recent ۴ 
Import ۴ 
Workgroup ۴ 
AııtormakE ۴ 


3152] 


o 
ا‎ e 0 


des=ksarconı 
Jump To 


Exit Ctrl+q 


نختار شكل من فامة الاشكال وهى الموضح بالصوز وايضا تسقظيح أن تخار مايناسبك وتحن 
هنا نعطيك البدايه او طريقة التصميم والابداع يبقى عليك انت 


x 


— [mage Size: 1.7 ۰ 


Wade: | RIB Lolar په‎ 


j Lonienig —— > 
(® white 
0 Background Lalor 
(O Transparent des- ksa.conı 


Sa | 


uaı 
E@® 


بعد رسم المربع نضبط اعداداته او شكل كما عملنا سابقا بالبنر .. ونوزع الشكل على الفوتر 
يمين ویسار بحيث يتناسب مع بعضه 


نرسم دائره بالنص ونكتب مانرید داخلها من حفظ حقوق وخلافه ... والى هنا ننتهي من الفوتر 


الان بعد الانتهاء من الفوتر نصمم مربع الاخر ٠١‏ مواضيع وهو شكل تجميلي للواجهه .. 
بالبداية نرسم مستطيل باطراف منحنيه كما تلاحظ 


Select Filler Yiew Window Help 


Guplicate Layer,,, 
Delete 


Layer PropertkiEs,,, 
Layer Style 


ew Fill Layer 

New Adjustment Layer 

Zhange Layer Content 

Layer Lontent Options... 

Type 

Shape 

Fil Content 
Add Layer Mask Yector Mask 
Enable Layer Mask. 


New Layer Based Slicë 


Layer 
Geleke Yector Mask E 


Disable Yector Mask 


Aroup with Previoys Ztrl+a 
LIngraup ShFEH+ZErl+HS 


ArranıgEê 
Alian Linked 
Distribute Linked 


Lack All Layers In Set, , 


Merge Dorn LErl+E 
Merge Yisible ShFE+ZErl+E 
Flatten Image 


Matting 


نكرر المستطيل او نرسم واحد اخر ولكن بشكل اصغر بكثير ونضعه فوق الاول ونكتب مثلا اخر 
٠‏ مواضيع بالشكل التالي 


dot 10 by 10 pixels, RSE rode 


لتعبئة أي شكل بدل اللون بالباترن مثل الخطوط 
او التنقبط مثاذ تختار اداذ التعبنه كما بالرقم 2 


نحدد الخيارمن فوق بدل التعبئه ٠‏ نختار باترين كما 

بالرقم 3 
نضغط على السهم الصفير لتفتح ذافذة اختيارنوع الباترن 
کها بالرقم 4 

الان نختارالباترن الذي ذريد كما بالرقم 5 


الان انتهينا من اخر ٠١‏ مواضيع .. نبداء بتصميم المساحات الأعلانيه وانا اعتبرها من 
الأساسيات بالموقع .. فهي التي تحقق شهره للموقع بالتبادل الاعلانيه وغيره 


نرسم مربع باطراف منحنيه تحت العشر مواضيع ونضبط اعداداته وشكله كما تعلمنا سابقا 


a 
|22 a ©. ل‎ @ 


lending Options... 


Grop Shadow... 
Inner Shadow... 
Gukter Glow,,, 


21320| 


Inner lom, ,, 


Eevel and Embo55,,, META CoM 
Sabin... 


olor Oyerlay,.. 
Sradient OverlaY,.. 
Pattern GyerlaY,,, 


Stroke... 


نرسم مربع اخر بنفس الشكل ولاكن اصغر منه قليلا ونضعه فوق الاول 


!Error 


— hiroke 
— Siructure 


|r*‏ 1 کچ :مچ 
Position:‏ 


o: 24 


olor: ES 


PFEY iB! 


Layer Style 


Styles 


Blending Optians: Default 


[Prop Shadow 


[Inner Shadow 
[_Buter tala 
[_Jnnar low 

[_ Esel and Emboszs 


L_FEontaur 
[_Fexture 
L_Eatin 
[Folor iwerlay 
[radiant werlay 


| Stroke 


الان ندرج صوره تجميليه ونضغط كما فعلنا سابقا ۲۸1+6 لدمجها مع المربع العلوي وهي 


حركه تستطيع الاستغنى عنها . ونكتب مثلا مساحه اعلانيه كما تلاحظ بالصوره التاليه وتلاحظ 
ايضا ترتيب اللير ليسهل عليك معرفة تصميمها 


الان انتهيناء من المساحه الاعلانيه ... مثل ماصممنا الاولى نصمم الثانيه ونجعلها تحت بهذا 
الشكل 


Blending Gpkions,,, 


Grop Shadow... 
Inner Shadow, ,, 
Duber Glow... 
Inner alo, ,, 


Eevel and Emboss,.. 


Sabin... 

olor Overlay... 
Gradient Overlay... 
Pattern Overlay... 


ھم 


نبداء بتصميم مربع او نافذة الدردشه . الشات . نرسم دائرتين يمين ويسار كما تلاحظ 


!Error 


Layer Style 


| Styles troke — 
سم‎ Structure 
Blending Gptians: Default e r rT 


[¥ Prop Shadow Position: Gutsida  # 
[¥]nner Shadow Blend Mode:  Norrnal ا‎ 

[_Buter alow pacity: ت‎ 100 i ا‎ 
[¥ jnnar alow 


[¥ Bevel and Embozs Fi Type: olor ¥ 


L_FEontaur Tolar: ll 
[_Fexturea 


L_Eatin 

[Folor verlay 
[_radient verlay 
|_Fattern Overlay 
Stroke 


: 90 
8 


| sŞ-ksa.com 


فوق هذه الدوائر نرسم مربع بأطراف منحنيه .. 


!Error 


Beyvel and Emboss 


Style: inner Ba wal ا‎ EE 
Technique: | Smooth | New Style 


Depth: xu ٭| ا‎ 
El 0 1 
Rn PrFEY iB! 


Direction: 
Size: 


Soften: 


Shading 


1 
2 


Angle: [ii 20 | 
Use lobal Light 
۳ [= 


Altitude: 


lass Lontour 


Highlight Made 
pacity: 


Shadow Mode 
pacity: 


| des-ksa.com 


نرسم مستطیلین صغیرین فوق وتحت ونکتب مانرید کما تلاحظ 


!Error 


Layer Style 


[ Styles 


Blending Options: Default 


| LFolor iwerlay 

| [radiant werlay 

| | Pattern Dwerlay 
[Stroke 


Layer Style 


Inner Glow - 


Blend Mode: | Screen اا‎ 
pacity: a | E i 
Noise:  “—kmemevÙw—سسا‎ 7 Hi 


EET‏ 2 2 ي 


PiInner Glow 


Elements 
TechniqUe: | Softer 2 
[_Fexture SoUFCZE: 0 Lente 0 Edge 

L_Eatin hoke: و سے‎ 
L_Folor werlay size: م‎ a 5 
[_Jaradient werlay 
L_Fattern Gverlay 
[ltroke Lontour : ا‎ Anti-aliaxzed 
¡ 


S0 
Jitter: و ج‎ 


Guality 


FEange 


نرسم مستطيلات مثل السابقه ونوزعها كما تلاحظ بالصوره ونضع روابط الشات عليها 


!Error 


Layer Style 


Elend Mode: 
l# Drop Shadow | pacity: 


Inner Shadow ا‎ 
THEFT Arıgls: 120 |? [¥] Use alobal Light 


lw jnnar alow Distance: ع س م‎ p* 
[¥ Eewel and Ermboss hoke: TE 3 


L_FEontaur Size: ع س م‎ px 
[_Fexture 


Eatin Guality 


[Folor iwerlay Lontour : ت‎ ۴ Anti-aliaxzed 


= En) ا‎ 3 E ا‎ لkغإ¿غ¿ضح‎  ۇÎ‎ 
ent iwerla E: 5 
[Patter n iwe lair 


ls Stroke 


90 
™ ا 


des-ksa.com 


وهكذا نكون خلصنا من تصميم مربع الشات .. ومثل ماتلاحظ العملية كلها رسم مربعات وتنسيقها 
لا اکثر . 


نبداء بتصميم القوائم وهي اخر ماتبقى لنا .. نذهب الى الأشكال ونختار الشكل المحدد كما تلاحظ 
بالصور وتستطیع ان تستبدله بأي شکل ترید 


!Error 


Layer Style 


Drop Shadow 
Structure 


Blend Mode: | Multiply 2 En 


ElProp Shadow سض .ارم‎ i 
وجج‎ 


a LEE LET 
: ا‎ —— : 
[_ Bouter law Angle: 0 20 [_ [se alobal Light EWE 


lw jnnar law Distance: و م‎ p* 


[¥ Bevel and Emboszs Spread: ۹ pg i 
L_FEontaur Size: 1َ 


[_Fexture 


FET Guality 
[Folor iwerlay Lontour : 
[_Jaradient werlay | 0 9 


L_Pattern werlay 
[Stroke 


Layer Enacks yt Drop Shadow 


dJes-ksa.com 


الان نرسم الشكل الذي اخترناه ونرسم ايضا اشكال اخرى بطريقة متناسقه كما تلاحظ هنا 


نرسم دائرہ فوقها جمیعا 


!Error 


_Jes=ksa.com 


ندمجها واحدا واحدا بالضغط كما تعلمنا سابقا على C۲۸ 1+6G‏ وهذه الحركه تجميليه .. 


r 
ا د ا‎ 
FE 
lk AF 
2 : _ 2 - ت کے‎ 
م‎ 


Layer Select Filler Yiewy Window Help 


te Transform CErHE 
Step Forward Shft+Ztrl+2 
step Backward Alt+ZErlH+E 


Fade... ShftrctrleF FEO 0O SD 0D E50 [00 [5 


Lk Er 
LopYy Er 
Lopy Merged ShFEHZErIHE 
Paste LErlHY 
Paste Into ShFEH+LErl+Y 
lear 


heck Spelling... 
Find and Replace Text,,, 


Fill... 
stroke... 


Free Transforri Ltrl+T 


Define Brush... 
Define Pattern... 
Define Custom Shape,.. 


Purge 


Lalor Settings...  ShHFEHCErl+K: 
Preset Manager... 
Preferences 


نرسم الازرار وهي مستطيلات متناسقه كما تلاحظ 


: ZF copy, RGB) 


Again Shft+trl+T 


Scale 
Rotate 
Shew 
Distort 
Perspectiwê 


Ratakte 1® 
Rotate 30 CY 
Rotate 0F COW 


Chirl#Z 
Sht+Ctr+E 
AllHCEHEEZ 


Shft+CEIEF 


CIHR 
Cil 
StH 
CErlEY 
ShfEHCEHHY 


Step Forward 
Step Backward 


Fade... 


uk 

Loopy 

Copy Merged 
Faske 

Fastê Irtû 
hear 


heck Spelling... 


Find and Replatê Text... 


Stroke... 


Trarisfari 


N: TIE x 
Define Pak 2 Pas 


Define Custom Shape... 


Shft+CErHHK 


tolar Settings... 
Frêšet Manêğêr... 
Preferences 


وهكذا ننهي الموقع كاملاا١١١١‏ 


لخدمات تصميم وبرمجة المواقع 
programmer4ever@yahoo.com‏ 
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